<template>
  <div>
    <el-popover :placement="placement" trigger="click" class="popover" width="300" :disabled="disabled">
      <el-tree
        ref="tree"
        :data="treeData"
        :props="props"
        :node-key="nodeKey"
        :show-checkbox="showCheckbox"
        check-on-click-node
        check-strictly
        :default-checked-keys="defaultCheckedKeys"
        :default-expand-all="defaultExpandAll"
        highlight-current
        expand-on-click-node
        class="tree"
        style="width: 100%"
        @check="checkTree"
      />
      <template #reference>
        <el-select
          v-model="checkedLabels"
          multiple
          filterable
          popper-class="dropdown"
          class="select"
          :placeholder="$t('message.validate.selectContent')"
          @change="onChangeSelect"
          :disabled="disabled"
        />
      </template>
    </el-popover>
  </div>
</template>

<script>
import { map, omit, reduce, isEmpty, split, filter } from 'lodash'
export default {
  name: 'PopupTreeInput',
  props: {
    value: {
      type: Array,
      required: true,
    },
    treeData: {
      type: Array,
      required: true,
    },
    props: {
      type: Object,
      required: true,
    },
    nodeKey: {
      type: String || Number,
      required: true,
    },
    placeholder: {
      type: String,
      default: '点击选择内容',
    },
    placement: {
      type: String,
      default: 'right-start',
    },
    defaultExpandAll: {
      type: Boolean,
      default: false,
    },
    defaultCheckedKeys: {
      type: Array,
      default() {
        return []
      },
    },
    formatValue: {
      type: Function,
      default: (value) => value,
    },
    showCheckbox: {
      type: Boolean,
      default: true,
    },
    disabled:{
      type: Boolean,
      default: true,
    }
  },
  emits: ['update:value'],
  data() {
    return {
      checkedLabels: [],
    }
  },
  watch: {
    value() {
      if (isEmpty(this.value)) {
        this.checkedLabels = []
        this.setCheckedKeys([])
      }
    },
    defaultCheckedKeys() {
      const selectedKeys = map(this.defaultCheckedKeys, (item) => item[this.nodeKey])
      this.setCheckedKeys(selectedKeys)
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      this.checkTree(null, { checkedNodes })
    },
  },
  created() {
    if (isEmpty(this.defaultCheckedKeys)) {
      return
    }
    this.$nextTick(() => {
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      this.checkTree(null, { checkedNodes })
    })
  },
  methods: {
    checkTree(data, { checkedNodes = [] }) {
         this.checkedLabels =map(checkedNodes,'name')
    //   this.checkedLabels = reduce(
    //     checkedNodes,
    //     (total, { children, name, parentName, id }) => {
    //       if (!isEmpty(children)) {
    //         return total
    //       }
    //       return [...total, `${parentName}-${name}`]
    //     },
    //     []
    //   )
      this.setValue(this.formatValue(checkedNodes))
    },
    onChangeSelect(values) {
      const checkNodeKeys = map(values, (item) => {
        return item.name
      })
      this.setCheckedKeys(checkNodeKeys)
      this.updateValue()
    },
    updateValue() {
      const checkedNodes = this.$refs.tree.getCheckedNodes(true)
      this.setValue(this.formatValue(checkedNodes))
    },
    setValue(data) {
    
      this.$emit('update:value',data.map(item=>omit(item,'children')))
    },
    setCheckedKeys(nodeKeys) {
      this.$refs.tree.setCheckedKeys(nodeKeys)
    },
  },
}
</script>

<style lang='scss' scoped>
.select {
  width: 100%;
  cursor: pointer;
}
.dropdown {
  display: none;
  .el-select-dropdown {
    display: none;
  }
}
.popover {
  overflow: auto;
  width: 300px;
}
.tree {
  max-height: 400px;
  overflow: auto;
}
</style>
